<template>

    <a-drawer
    :destroyOnClose="true"
    :title="title"
    placement="right"
    :closable="true"
    :visible="visible"
    :maskClosable="true"
    :width="600"
    @close="onClose">
        <a-spin :spinning="spinning">
        <a-tabs :activeKey="currentSystem" tabPosition="left" @change="changeTab">
            <a-tab-pane v-for="s in systems" :key="s.systemNo" :tab="s.systemName">
                <a-tree checkable
                 @check="onCheck"
                 @select="onTreeNodeSelect"
                 @expand="onExpand"
                 :treeData="treeData[s.systemNo]" 
                 :checkedKeys="checkedKeys"
                 :expandedKeys="expandedKeysss"
                 :checkStrictly="checkStrictly"
                 />
            </a-tab-pane>
        </a-tabs>
        </a-spin>
        <!--底部的按钮-->
        <div class="drawer-bootom-button">
            <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
                <a-menu slot="overlay">
                <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
                <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
                <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
                <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
                </a-menu>
                <a-button>
                树操作 <a-icon type="up" />
                </a-button>
            </a-dropdown>
            <a-popconfirm title="确定放弃操作？" @confirm="onClose" okText="确定" cancelText="取消">
                <a-button style="margin-right: .8rem">取消</a-button>
            </a-popconfirm>
            <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
        </div>
    </a-drawer>

</template>

<script>

import pick from 'lodash.pick'
import request from '@/utils/request'
import {saveSysRoleMenu,getAllSysRoleMenu} from '@/api/role'

export default {
    name:'roleMenu',
    mixins:[],
    components:{

    },
    data(){
        return{
            title:'详情',
            visible:false,
            spinning:false,
            model:{},
            currentSystem:'',
            loading: false,
            systems:[],
            treeData:{},
            allTreeKeys:{},//所有的树节点
            roleMenuKeys:{},//角色拥有的菜单节点
            checkedKeys:[],//选中的节点
            expandedKeysss:[],//展开的节点
            checkStrictly: false,//如果为true 表示不父子管理，false 表示父子关联
            autoExpandParent: true,
           
        }
    },
    methods:{
       
        edit (record) {
            this.visible = true;
            this.model = Object.assign({}, record);
           
        },
       reset () {
            this.expandedKeysss = []
            this.checkedKeys = []
            this.halfCheckedKeys={}
            this.loading = false
        },
        onClose(){
            this.reset();
            this.visible = false;
        },
        changeTab(key){
            this.currentSystem=key;
            //展开所有节点
            this.expandAll();
            this.checkedKeys=this.roleMenuKeys[this.currentSystem];
        },
        //选中节点调用方法
        onCheck (o,info) {
            if(this.checkStrictly){
                this.checkedKeys = o.checked;
            }else{
                this.checkedKeys = o
            }
         //   this.allCheckedKeys = [...o,...info.halfCheckedKeys]
            
        },
        onTreeNodeSelect(selectedKeys, info){
            console.log(selectedKeys,info);
        },
        //选中所有
        checkALL () {
            this.checkedKeys = this.allTreeKeys[this.currentSystem]
            
        },
        //取消所有
        cancelCheckALL(){
            this.checkedKeys=[]
        },
        expandAll(){
            this.expandedKeysss = this.allTreeKeys[this.currentSystem];
        },
        closeAll(){
            this.expandedKeysss=[];
        },
        onExpand(expandedKeys){
            this.expandedKeysss = expandedKeys;
            this.autoExpandParent = false
      },
        handleSubmit(){
      
            let that = this;
            that.loading = true;
            let params={
                roleNo:that.model["roleNo"],
                systemNo:that.currentSystem,
                menuNo:that.checkedKeys.join(","),
                
            }
            saveSysRoleMenu(params).then((res)=>{
                if(res.success){
                    that.$message.success(res.message);
                    that.loading = false;
                    that.roleMenuKeys[that.currentSystem]=that.checkedKeys;
                  //  that.onClose();
                }else{
                    that.$message.error(res.message);
                    that.loading = false;
                 //   that.onClose();
                }
            })
        }
       
    },
    mounted(){

        this.$nextTick(()=>{
            let that = this;
            
           
        })
    },
    watch:{
        visible () {
            let that = this;

            if (that.visible) {
                that.spinning=true
                getAllSysRoleMenu(that.model["roleNo"]).then(res => {
                    if(res.success && res.result){
                       // console.log(res.result);
                        //得到所有系统
                        that.systems = res.result["systems"];
                        //当期默认选中的TAB
                        that.currentSystem = that.systems[0]["systemNo"]
                        //得到每个系统的菜单
                        that.treeData = res.result["treeData"]
                        //得到每个系统的菜单ID
                        that.allTreeKeys = res.result["treeKeys"]
                        //展开的节点
                        that.expandedKeysss = that.allTreeKeys[that.currentSystem];
                        //此角色在每个系统拥有的菜单权限信息
                        that.roleMenuKeys = res.result["roleMenuKeys"]
                        //默认选中拥有的菜单节点
                        that.checkedKeys=that.roleMenuKeys[that.currentSystem];
                        
                       that.spinning=false
                    }
                })
            }
        }
    }
}
</script>
<style scoped>
  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

</style>